<template>
  <div class="message">
    <button @click="addToList" style="margin-top: 50px">点击</button>
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :loop="barrageLoop"
    >
    </vue-baberrage>
  </div>
</template>

<script>
import { MESSAGE_TYPE } from "vue-baberrage";
export default {
  name: "Message",
  data() {
    return {
      msg: "Hello vue-baberrage",
      barrageIsShow: true,
      currentId: 1,
      barrageLoop: false,
      barrageList: [],
    };
  },
  mounted() {
    this.addToList();
  },
  methods: {
    addToList() {
      this.barrageList.push({
        id: ++this.currentId,
        avatar: "../assets/images/rocket.png",
        msg: "测试",
        time: 5,
        type: MESSAGE_TYPE.NORMAL,
      });
    },
  },
};
</script>

<style scoped>
.message {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  background-image: url("../assets/images/message_bg.jpg");
  background-size: 100% 100%;
}
</style>